<template>
  <div class="app">
    <div>
      账号: <input v-model="username" type="text">
    </div>
     <div>
      密码: <input v-model="password" type="text">
    </div>
    <div>
      <button @click="getFormData">获取数据</button>
      <button @click="resetFormData">重置数据</button>
    </div>
  </div>
</template>

<script>
/*
ref 和 $refs
  作用:利用 ref 和 $refs 可以用于 获取 dom 元素或 组件实例
  特点:查找范围 > 当前组件内(更精确稳定)

1 获取 dom:
    1.目标标签-添加ref 属性
      <div ref="chartRef">我是染图表的容器</div>
    2.恰当时机通过 this.$refs.xxx,获取目标标签
      mounted ()[
        console.log(this.$refs.chartRef)
      }
2 获取组件:
  1.目标组件- 添加 ref 属性
      <BaseForm ref="baseForm'></BaseForm>
   2.恰当时机,通过 this.$refs.xxx,获取目标组件就可以调用组件对象里面的方法
      this.$refs.baseForm.组件方法()      
*/
export default {
  data() {
    return {
      username: 'admin',
      password: '123456',
    }
  },
  methods: {
    getFormData() {
      console.log('获取表单数据', this.username, this.password);
      return {
        username: this.username,
        password: this.password,
      }
    },
    resetFormData() {
      this.username = ''
      this.password = ''
      console.log('重置表单数据成功');
    },
  }
}
</script>

<style scoped>
.app {
  border: 2px solid #ccc;
  padding: 10px;
}
.app div{
  margin: 10px 0;
}
.app div button{
  margin-right: 8px;
}
</style>